<template>
  <div :class="$style.wrap">
    <FormContainer :column="3">
      <el-form ref="form" :model="formData" :rules="formRules" label-width="80px">
        <el-form-item prop="inspectionedGroup" label="受检业务组">
          <SearchSelectPicker
            url="/call-center/api/v1/businessGroup/page"
            placeholder="请选择受检业务组"
            lable-name="groupName"
            value-name="groupNo"
            :value.sync="formData.inspectionedGroup"
            :lable.sync="formData.inspectionedGroupName"
            multiple
            collapse-tags
          ></SearchSelectPicker>
        </el-form-item>
        <el-form-item prop="inspectionedAccount" label="受检人">
          <SearchSelectPicker
            url="/call-center/api/v1/staffInfo/page"
            :other-raw="{groupNos:formData.inspectionedGroup}"
            placeholder="请选择执行坐席"
            value-name="accountNo"
            lable-name="staffName"
            :parent-id="formData.inspectionedGroup"
            :value.sync="formData.inspectionedAccount"
            :lable.sync="formData.inspectionedAccountName"
          ></SearchSelectPicker>
        </el-form-item>
        <el-form-item>
          <Button type="primary" @click="queryHandle">查询</Button>
        </el-form-item>
      </el-form>
    </FormContainer>
    <table-box ref="table" no-request :table-config="tableConfig" :other-filters="otherFilters" :other-raw="otherRaw" @selection-change="selectionChangeHandle">
      <template v-slot:before>
        <el-table-column type="selection" align="center" width="55"></el-table-column>
        <el-table-column type="index" label="序号" align="center" width="50"></el-table-column>
      </template>
    </table-box>
    <ButtonGroup :button="['save', 'next', 'prev']" padding-top="10px" @next="nextHandle" @prev="prevHandle" @save="saveHandle"></ButtonGroup>
  </div>
</template>

<script>
import SearchSelectPicker from '@/components/SearchSelectPicker'
import FormContainer from '@/components/FormContainer'
import ButtonGroup from './buttonGroup'
import { filtersRaw } from '@/utils'
import { qualityCheckProjectSaveLitigant } from '@/api/inspection'
function litigant(projectId, id, operator, operatorName, businessGroupNo, businessGroupName) {
  return {
    projectId,
    operatorType: 2, // 操作人类型1质检人2受检人
    id,
    operator,
    operatorName,
    businessGroupNo,
    businessGroupName
  }
}
export default {
  name: 'BeInspectionPersonList',
  components: {
    SearchSelectPicker,
    FormContainer,
    ButtonGroup
  },
  props: {
    stepData: {
      type: Object,
      default: () => ({})
    },
    next: {
      type: String,
      default: undefined
    },
    prev: {
      type: String,
      default: undefined
    },
    isEdit: {
      type: Boolean,
      default: false
    }
  },
  data() {
    const validatorGroup = (r, v, c) => {
      if (v instanceof Array && v.length > 0) {
        c()
      } else {
        c(new Error('请选择受检业务组'))
      }
    }
    return {
      formData: {
        inspectionedGroup: [],
        inspectionedGroupName: [],
        inspectionedAccount: '',
        inspectionedAccountName: ''
      },
      formRules: {
        inspectionedGroup: [
          { required: true, type: 'array', message: '请选择受检业务组', trigger: 'change' },
          { validator: validatorGroup, trigger: 'change' }
        ]
      },
      tableConfig: {
        interfacePath: '/call-center/api/v1/staffInfo/page',
        hideFuncBar: true,
        sort: 'createTime',
        order: 'desc',
        pageFlag: false,
        setting: [
          {
            label: '受检人',
            prop: 'accountName',
            minWidth: 120,
            formatData: v => {
              let str = ''
              if (v.accountNo) {
                str = `${v.staffName}(${v.accountNo})`
              } else if (v.operator) {
                str = `${v.operatorName}(${v.operator})`
              }
              return str
            }
          },
          {
            label: '所属业务组',
            prop: 'groupName',
            minWidth: 160,
            formatData: v => {
              return v.businessGroupName ? v.businessGroupName : v.groupName
            }
          }
        ]
      },
      otherFilters: [],
      otherRaw: {},
      selectionList: []
    }
  },
  mounted() {
    if (this.stepData.litigants.length > 0) {
      const data = []
      for (const e of this.stepData.litigants) {
        data.push({
          groupName: e.businessGroupName,
          groupNo: e.businessGroupNo,
          id: e.id,
          accountNo: e.operator,
          staffName: e.operatorName
        })
      }
      this.$refs.table.tableData = data
    }
  },
  methods: {
    queryHandle(type) {
      return this.$refs.form.validate().then(() => {
        const otherRaw = {}
        const otherFilters = []
        const { inspectionedGroup, inspectionedAccount } = this.formData
        if (inspectionedGroup && inspectionedGroup.length > 0) {
          otherRaw.groupNos = `[${inspectionedGroup.join(',')}]`
        }
        if (!this.$validateNone(inspectionedAccount)) {
          otherFilters.push(filtersRaw('accountNo', inspectionedAccount, '='))
        }
        otherFilters.push(filtersRaw('state', 1, '='))
        this.otherRaw = otherRaw
        this.otherFilters = otherFilters
        if (type !== 'export') {
          this.refreshTable(type)
        }
        return otherFilters
      })
    },
    selectionChangeHandle(v) {
      this.selectionList = v
    },
    refreshTable(type) {
      this.$nextTick(() => {
        this.$refs.table.initTableData(type)
      })
    },
    // 保存
    genData() {
      return this.$checkSelected(this.selectionList, false).then(() => {
        const litigantBusinessGroupNo = new Set()
        const litigantBusinessGroupName = new Set()
        const litigants = this.selectionList.map(e => {
          e.groupNo.split(',').forEach(v => litigantBusinessGroupNo.add(v))
          e.groupName.split(',').forEach(v => litigantBusinessGroupName.add(v))
          return litigant(this.stepData.id, e.id, e.accountNo, e.staffName, e.groupNo, e.groupName)
        })
        return {
          litigantBusinessGroupNo: Array.from(litigantBusinessGroupNo).join(','),
          litigantBusinessGroupName: Array.from(litigantBusinessGroupName).join(','),
          litigants
        }
      })
    },
    saveHandle() {
      return this.genData().then(data => {
        data.id = this.stepData.id
        return qualityCheckProjectSaveLitigant(data).then(res => {
          this.$message.success('保存成功！')
          this.$emit('on-refresh')
        })
      })
    },
    nextHandle() {
      this.$emit('input', this.next)
    },
    prevHandle() {
      this.$emit('input', this.prev)
    }
  }
}
</script>
<style lang="scss" module>
.wrap{
  & [class*="pagination-container"]{
    display: none !important;
  }
}
</style>
